// pc:elemnt plus url:https://element-plus.gitee.io/zh-CN/component/button.html

// form components
export const checkbox = (options, model, desc = '') => {
  let str = ''
  // eslint-disable-next-line no-undef
  for (label in options) {
    // eslint-disable-next-line no-undef
    str += `  <el-checkbox label="${label}" v-model="${options[label]}"  />`
  }
  return `
    <el-form-item label="${desc}" prop="${model}">
      <el-checkbox-group v-model="form.${model}">
      ${str}
      </el-checkbox-group>
    </el-form-item>
`
}

export const radio = (options, model, desc = '') => {
  let str = ''
  // eslint-disable-next-line no-undef
  for (label in options) {
    // eslint-disable-next-line no-undef
    str += `  <el-radio label="${label}" v-model="${options[label]}"  />`
  }
  return `
    <el-form-item label="${desc}" prop="${model}">
      <el-radio-group v-model="form.${model}" class="ml-4">
      ${str}
      </el-radio-group>
    </el-form-item>
  `
}

export const datePicker = (model, desc = '') => {
  return `
    <el-form-item label="${desc}" prop="${model}">
      <el-date-picker v-model="form.${model}" type="date" placeholder="请选择${desc}" size="small"/>
    </el-form-item>
`
}
export const dateRange = (model, changeFuncName = '', desc = '',cls='') => {
  return `
  <el-form-item label="${desc}" prop="${model}" class='${cls}'>
    <el-date-picker type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
    class="search-item" @change="${changeFuncName}"  value-format="x" v-model="${model}" />
  </el-form-item>
  `
}
export const datimePicker = (model, desc = '') => {
  return `
    <el-form-item label="${desc}" prop="${model}">
      <el-date-picker v-model="form.${model}" type="datetime" placeholder="请选择${desc}" format="YYYY/MM/DD hh:mm:ss"/>
    </el-form-item>
  `
}

export const input = (model, desc = '') => {
  return `
    <el-form-item label="${desc}" prop="${model}">
      <el-input v-model="form.${model}" placeholder="请输入${desc}" style='width:300px' />
    </el-form-item>
`
}
export const inputNumber = (model, desc = '', min, max, step) => {
  return `
    <el-form-item label="${desc}" prop="${model}">
      <el-input-number :min='${min}' :max='${max}' :step='${step}'  v-model="form.${model}" placeholder="请输入${desc}" />
    </el-form-item>
`
}

export const textarea = (model, desc = '') => {
  return `
    <el-form-item label="${desc}" prop="${model}">
      <el-input v-model="form.${model}" :rows="2" type="textarea" placeholder="请输入${desc}"/>
    </el-form-item>
`
}

// to do as select component
// you can select more when the single is false
export const select = (url, model, single, desc = '',prefix='form',cls='') => {
  return `
    <el-form-item label="${desc}" prop="${model}" class='${cls}'>
      <Select :url='"${url}"' v-model='${prefix}.${model}' :desc="'${desc}'" :single="${single}" />
    </el-form-item>
`
}

export const elSelect = (model, options, desc = '', single = true,prefix='form',cls='') => {
  let elOptions = ''
  for (const label in options) {
    elOptions += `<el-option label='${label}' value='${options[label]}' />`
  }
  return `
    <el-form-item label="${desc}" prop="${model}" class='${cls}'>
      <el-select v-model='${prefix}.${model}' class="m-2" placeholder="${desc}" :multiple='${!single}'>
      ${elOptions}
      </el-select>
    </el-form-item>
`
}

export const searchElSelect = (model, options, desc = '', single = true, prefix = 'form', cls = '') => {
  let elOptions = ''
  for (const label in options) {
    elOptions += `<el-option label='${label}' value='${options[label]}' />`
  }
  return `
    <el-form-item  prop="${model}" class='${cls}'>
      <el-select v-model='${prefix}.${model}' class="m-2" placeholder="${desc}" :multiple='${!single}'>
      <el-option value="0" :label="'请选择${desc}'" />
      ${elOptions}
      </el-select>
    </el-form-item>
`
}

export const timePicker = (model, desc = '') => {
  return `
    <el-form-item label="${desc}" prop="${model}">
      <el-time-picker v-model="form.${model}" arrow-control
      placeholder="请选择${desc}"/>
    </el-form-item>
`
}
export const timeSelect = (model, desc = '') => {
  return `
    <el-form-item label="${desc}" prop="${model}">
      <el-time-select v-model="form.${model}" start="00:00" step="00:10" end="24:00" placeholder="请选择${desc}"/>
    </el-form-item>
`
}

export const formSwitch = (activeValue, inactiveValue, activeText, inactiveText, model, desc = '') => {
  return `
    <el-form-item label="${desc}" prop="${model}">
      <el-switchv-model="form.${model}" active-value="${activeValue}" inactive-value="${inactiveValue}" active-text="${activeText}" inactive-text="${inactiveText}"/>
    </el-form-item>
  `
}
/**
 *
 * @param {*} model
 * @param {*} desc
 * @param {*} limit  最大上传个数
 * @param {*} range 上传范围
 * @param {*} multiple 是否多图 true 是 false 否
 * @param {*} listType  element-plus 图片类型
 * @param {*} addFunc  是否添加emit函数 true 是 false 否
 * @returns
 */
export const uploadImage = (model, desc, limit = 0, range = 0, multiple = false, addFunc = true) => {
  let func = ''
  if (addFunc) {
    func = `
    const uploadedImg = (res:any) => {
      form.value.${model} = res
    }
    `
  }
  let template = ''
  if (multiple) {
    if (limit <= 0) {
      // 无限制
      if (range) {
        if (addFunc) {
          template = `
          <el-form-item label="${desc}" prop="${model}" class="tl">
            <UploadImg :list="form.${model}" :multiple="${multiple}" :range="${range}" :uploadedImg="uploadedImg"/>
          </el-form-item>
      `
        } else {
          template = `
          <el-form-item label="${desc}" prop="${model}" class="tl">
            <UploadImg :list="form.${model}" :multiple="${multiple}" :range="${range}"/>
          </el-form-item>
      `
        }
      } else {
        if (addFunc) {
          template = `
          <el-form-item label="${desc}" prop="${model}" class="tl">
            <UploadImg :list="form.${model}" :multiple="${multiple}" :uploadedImg="uploadedImg" />
          </el-form-item>
      `
        } else {
          template = `
          <el-form-item label="${desc}" prop="${model}" class="tl">
            <UploadImg :list="form.${model}" :multiple="${multiple}"/>
          </el-form-item>
      `
        }
      }
    } else {
      // 有限制
      if (range) {
        if (addFunc) {
          template = `
          <el-form-item label="${desc}" prop="${model}" class="tl">
            <UploadImg :list="form.${model}" :multiple="${multiple}"  :limit="${limit}" :range="${range}" :uploadedImg="uploadedImg" />
          </el-form-item>
      `
        } else {
          template = `
          <el-form-item label="${desc}" prop="${model}" class="tl">
            <UploadImg :list="form.${model}" :multiple="${multiple}"  :limit="${limit}" :range="${range}"/>
          </el-form-item>
      `
        }
      } else {
        if (addFunc) {
          template = `
          <el-form-item label="${desc}" prop="${model}" class="tl">
            <UploadImg :list="form.${model}" :multiple="${multiple}"  :limit="${limit}" :uploadedImg="uploadedImg" />
          </el-form-item>
      `
        } else {
          template = `
          <el-form-item label="${desc}" prop="${model}" class="tl">
            <UploadImg :list="form.${model}" :multiple="${multiple}"  :limit="${limit}" />
          </el-form-item>
      `
        }
      }
    }
  } else {
    if (addFunc) {
      template = `
      <el-form-item label="${desc}" prop="${model}" class="tl">
        <UploadImg :img="form.${model}" :multiple="${multiple}" :limit="${limit}" @uploadedImg="uploadedImg"  />
      </el-form-item>`
    } else {
      template = `
      <el-form-item label="${desc}" prop="${model}" class="tl">
        <UploadImg :img="form.${model}" :multiple="${multiple}" :limit="${limit}" />
      </el-form-item>`
    }
  }
  return {
    func,
    template
  }
}

export const richText = (model, desc) => {
  return `
    <el-form-item label="${desc}" prop="${model}">
      <Editor v-model="form.${model}" />
    </el-form-item>
`
}
/**
 *
 * @param {*} model
 * @param {*} desc
 * @param {*} addFunc 是否添加回调 true 是 false 否
 * @param {*} limit 最大个数
 * @returns
 */
export const tag = (model, desc, addFunc = true, limit = 10) => {
  let func = ''
  let template = ''
  if (addFunc) {
    func = `
const changeTags = (res:Array<string>) => {
  form.value.${model} = res
}
    `
    template = `
    <el-form-item label="${desc}" prop="${model}" class="tl">
      <Tag :list="form.${model}"  v-on:changeTags='changeTags' :limit="${limit}" />
    </el-form-item>
  `
  } else {
    template = `
    <el-form-item label="${desc}" prop="${model}" class="tl">
      <Tag :list="form.${model}" :limit="${limit}"  />
    </el-form-item>
  `
  }
  return {
    func,
    template
  }
}
